ഫ്രണ്ട്എൻഡ് പെർഫോമൻസ് ടെസ്റ്റിംഗ്: തുടർച്ചയായ മെച്ചപ്പെടുത്തലിനായി ലൈറ്റ്ഹൗസ് സിഐ സംയോജിപ്പിക്കുന്നു

ഇന്നത്തെ ഡിജിറ്റൽ ലോകത്ത്, വെബ്സൈറ്റ് പ്രകടനം വളരെ പ്രധാനമാണ്. വേഗത കുറഞ്ഞ ലോഡിംഗ് സമയം, പ്രവേശനക്ഷമതയിലെ പ്രശ്നങ്ങൾ, മോശം എസ്.ഇ.ഒ എന്നിവ ഉപയോക്തൃ അനുഭവത്തെയും അതുവഴി ബിസിനസ്സ് ഫലങ്ങളെയും കാര്യമായി ബാധിക്കും. ആധുനിക സോഫ്റ്റ്‌വെയർ ഡെവലപ്‌മെന്റ് ജീവിതചക്രത്തിന്റെ അവിഭാജ്യ ഘടകമായി ഫ്രണ്ട്എൻഡ് പ്രകടന പരിശോധന മാറിയിരിക്കുന്നു. ഇത് വെബ്സൈറ്റുകളും വെബ് ആപ്ലിക്കേഷനുകളും ആഗോള ഉപയോക്താക്കൾക്ക് വേഗതയേറിയതും വിശ്വസനീയവും ഉപയോക്തൃ-സൗഹൃദവുമാണെന്ന് ഉറപ്പാക്കുന്നു. ഫ്രണ്ട്എൻഡ് പ്രകടന പരിശോധന ഓട്ടോമേറ്റ് ചെയ്യാനും തുടർച്ചയായ മെച്ചപ്പെടുത്തൽ പ്രോത്സാഹിപ്പിക്കാനും ശക്തമായ ഒരു ഓപ്പൺ സോഴ്‌സ് ടൂളായ ലൈറ്റ്ഹൗസ് സിഐയെ നിങ്ങളുടെ കണ്ടിന്യൂവസ് ഇന്റഗ്രേഷൻ (സിഐ) പൈപ്പ്ലൈനിലേക്ക് എങ്ങനെ സംയോജിപ്പിക്കാം എന്ന് ഈ ലേഖനം വിശദീകരിക്കുന്നു.

എന്തുകൊണ്ടാണ് ഫ്രണ്ട്എൻഡ് പെർഫോമൻസ് ടെസ്റ്റിംഗ് പ്രധാനമാകുന്നത്?

ലൈറ്റ്ഹൗസ് സിഐയിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, ഫ്രണ്ട്എൻഡ് പ്രകടന പരിശോധന എന്തുകൊണ്ട് നിർണായകമാണെന്ന് നമുക്ക് മനസ്സിലാക്കാം:

• ഉപയോക്തൃ അനുഭവം: വേഗതയേറിയതും പ്രതികരണശേഷിയുള്ളതുമായ ഒരു വെബ്സൈറ്റ് മികച്ച ഉപയോക്തൃ അനുഭവം നൽകുന്നു, ഇത് ഇടപഴകൽ വർദ്ധിപ്പിക്കുകയും ബൗൺസ് നിരക്ക് കുറയ്ക്കുകയും ചെയ്യുന്നു. ജപ്പാനിലെ ടോക്കിയോയിലുള്ള ഒരു ഉപഭോക്താവ് വേഗത കുറഞ്ഞ ഒരു ഇ-കൊമേഴ്സ് സൈറ്റിൽ നിന്ന് ഒരു ഉൽപ്പന്നം വാങ്ങാൻ ശ്രമിക്കുന്നത് സങ്കൽപ്പിക്കുക. അവർ ആ സൈറ്റ് ഉപേക്ഷിച്ച് മറ്റ് വഴികൾ തേടാൻ സാധ്യതയുണ്ട്.
• എസ്.ഇ.ഒ റാങ്കിംഗ്: ഗൂഗിൾ പോലുള്ള സെർച്ച് എഞ്ചിനുകൾ വെബ്സൈറ്റിന്റെ വേഗതയും പ്രകടനവും റാങ്കിംഗ് ഘടകങ്ങളായി പരിഗണിക്കുന്നു. വേഗതയേറിയ വെബ്സൈറ്റുകൾ സെർച്ച് ഫലങ്ങളിൽ ഉയർന്ന റാങ്ക് നേടുകയും കൂടുതൽ ഓർഗാനിക് ട്രാഫിക് ആകർഷിക്കുകയും ചെയ്യുന്നു. ഗൂഗിളിന്റെ കോർ വെബ് വൈറ്റൽസ് സംരംഭം ലാർജസ്റ്റ് കണ്ടെന്റ്ഫുൾ പെയിന്റ് (LCP), ഫസ്റ്റ് ഇൻപുട്ട് ഡിലേ (FID), ക്യുമുലേറ്റീവ് ലേഔട്ട് ഷിഫ്റ്റ് (CLS) തുടങ്ങിയ ഘടകങ്ങളുടെ പ്രാധാന്യം എടുത്തു കാണിക്കുന്നു.
• പ്രവേശനക്ഷമത: പ്രകടനത്തിലെ മെച്ചപ്പെടുത്തലുകൾ പലപ്പോഴും വൈകല്യമുള്ള ഉപയോക്താക്കൾക്ക് മികച്ച പ്രവേശനക്ഷമത നൽകുന്നു. ഒപ്റ്റിമൈസ് ചെയ്ത കോഡും ചിത്രങ്ങളും സ്ക്രീൻ റീഡറുകളെ ആശ്രയിക്കുന്നവർക്കും പരിമിതമായ ബാൻഡ്‌വിഡ്ത്ത് ഉള്ളവർക്കും അനുഭവം മെച്ചപ്പെടുത്താൻ സഹായിക്കും.
• കൺവേർഷൻ നിരക്കുകൾ: വേഗതയേറിയ വെബ്സൈറ്റിന് കൺവേർഷൻ നിരക്കുകളെ നേരിട്ട് സ്വാധീനിക്കാൻ കഴിയും. പേജ് ലോഡ് സമയത്തിലെ ഒരു സെക്കൻഡ് കാലതാമസം പോലും കൺവേർഷനുകളിൽ കാര്യമായ കുറവുണ്ടാക്കുമെന്ന് പഠനങ്ങൾ തെളിയിച്ചിട്ടുണ്ട്. ഇന്ത്യയിലെ മുംബൈയിലുള്ള ഒരു ഉപയോക്താവ് ഫ്ലൈറ്റ് ബുക്ക് ചെയ്യാൻ ശ്രമിക്കുന്നത് ചിന്തിക്കുക. വേഗത കുറഞ്ഞ ബുക്കിംഗ് പ്രക്രിയ അവരെ ആ ശ്രമം ഉപേക്ഷിച്ച് ഒരു എതിരാളിയെ തിരഞ്ഞെടുക്കാൻ പ്രേരിപ്പിച്ചേക്കാം.
• വിഭവങ്ങളുടെ ഒപ്റ്റിമൈസേഷൻ: വിഭവങ്ങൾ എവിടെയെല്ലാം ഒപ്റ്റിമൈസ് ചെയ്യാമെന്ന് കണ്ടെത്താൻ പ്രകടന പരിശോധന സഹായിക്കുന്നു, ഇത് സെർവർ ഇൻഫ്രാസ്ട്രക്ചറിന്റെയും ബാൻഡ്‌വിഡ്ത്ത് ഉപയോഗത്തിന്റെയും കാര്യത്തിൽ ചെലവ് ലാഭിക്കാൻ സഹായിക്കുന്നു.

ലൈറ്റ്ഹൗസ് സിഐയെ പരിചയപ്പെടുത്തുന്നു

ലൈറ്റ്ഹൗസ് സിഐ നിങ്ങളുടെ സിഐ/സിഡി പൈപ്പ്ലൈനുമായി എളുപ്പത്തിൽ സംയോജിപ്പിക്കാൻ രൂപകൽപ്പന ചെയ്ത ഒരു ഓപ്പൺ സോഴ്‌സ്, ഓട്ടോമേറ്റഡ് ടൂളാണ്. ഇത് ഗൂഗിൾ വികസിപ്പിച്ചെടുത്ത ജനപ്രിയ ഓഡിറ്റിംഗ് ടൂളായ ലൈറ്റ്ഹൗസ് പ്രവർത്തിപ്പിക്കുകയും നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രകടനം, പ്രവേശനക്ഷമത, എസ്.ഇ.ഒ, മികച്ച രീതികൾ, പ്രോഗ്രസ്സീവ് വെബ് ആപ്പ് (PWA) അനുസരണ എന്നിവയെക്കുറിച്ചുള്ള ഉൾക്കാഴ്ചകൾ നൽകുകയും ചെയ്യുന്നു. ലൈറ്റ്ഹൗസ് സിഐ നിങ്ങളെ സഹായിക്കുന്നു:

• പ്രകടന ഓഡിറ്റുകൾ ഓട്ടോമേറ്റ് ചെയ്യുക: ഓരോ കമ്മിറ്റിനും പുൾ അഭ്യർത്ഥനയ്ക്കും ഒപ്പം ലൈറ്റ്ഹൗസ് ഓഡിറ്റുകൾ യാന്ത്രികമായി പ്രവർത്തിപ്പിക്കുക.
• കാലക്രമേണയുള്ള പ്രകടനം നിരീക്ഷിക്കുക: കാലക്രമേണ പ്രകടന മെട്രിക്കുകൾ നിരീക്ഷിക്കുകയും പ്രശ്നങ്ങൾ നേരത്തെ തിരിച്ചറിയുകയും ചെയ്യുക.
• പ്രകടന ബജറ്റുകൾ സജ്ജീകരിക്കുക: പ്രകടന ബജറ്റുകൾ നിർവചിക്കുക, അവ കവിഞ്ഞാൽ ബിൽഡുകൾ പരാജയപ്പെടുത്തുക.
• സിഐ/സിഡി സിസ്റ്റങ്ങളുമായി സംയോജിപ്പിക്കുക: ഗിറ്റ്ഹബ് ആക്ഷൻസ്, ഗിറ്റ്ലാബ് സിഐ, സർക്കിൾസിഐ, ജെൻകിൻസ് തുടങ്ങിയ ജനപ്രിയ സിഐ/സിഡി സിസ്റ്റങ്ങളുമായി സംയോജിപ്പിക്കുക.
• പ്രകടന പ്രശ്നങ്ങളിൽ സഹകരിക്കുക: ലൈറ്റ്ഹൗസ് റിപ്പോർട്ടുകൾ പങ്കിടുകയും പ്രകടന പ്രശ്നങ്ങൾ പരിഹരിക്കുന്നതിന് നിങ്ങളുടെ ടീമുമായി സഹകരിക്കുകയും ചെയ്യുക.

ലൈറ്റ്ഹൗസ് സിഐ സജ്ജീകരിക്കുന്നു

നിങ്ങളുടെ പ്രോജക്റ്റിൽ ലൈറ്റ്ഹൗസ് സിഐ സജ്ജീകരിക്കുന്നതിനുള്ള ഒരു ഘട്ടം ഘട്ടമായുള്ള ഗൈഡ് ഇതാ:

1. ലൈറ്റ്ഹൗസ് സിഐ ഇൻസ്റ്റാൾ ചെയ്യുക

npm അല്ലെങ്കിൽ yarn ഉപയോഗിച്ച് ലൈറ്റ്ഹൗസ് സിഐ സിഎൽഐ ഗ്ലോബലായി ഇൻസ്റ്റാൾ ചെയ്യുക:

            npm install -g @lhci/cli
yarn global add @lhci/cli
            

              
                Copy
              
            
          

2. ലൈറ്റ്ഹൗസ് സിഐ കോൺഫിഗർ ചെയ്യുക

ലൈറ്റ്ഹൗസ് സിഐ കോൺഫിഗർ ചെയ്യുന്നതിന് നിങ്ങളുടെ പ്രോജക്റ്റിന്റെ റൂട്ട് ഡയറക്ടറിയിൽ ഒരു lighthouserc.js ഫയൽ ഉണ്ടാക്കുക. ഒരു ഉദാഹരണ കോൺഫിഗറേഷൻ ഇതാ:

            module.exports = {
  ci:
{
    collect:
{
      url: ['http://localhost:3000', 'http://localhost:3000/about'],
      startServerCommand: 'npm start',
      numberOfRuns: 3,
    },
    assert:
{
      assertions:
{
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 1 }],
        'categories:best-practices': ['warn', { minScore: 0.9 }],
        'categories:seo': ['warn', { minScore: 0.9 }],
        'categories:pwa': ['off'],
        'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 4000 }],
        'total-blocking-time': ['warn', { maxNumericValue: 200 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
      },
    },
    upload:
{
      target: 'temporary-redirect',
    },
  },
};

            

              
                Copy
              
            
          

ഈ കോൺഫിഗറേഷൻ നമുക്ക് വിശദമായി പരിശോധിക്കാം:

• collect.url: ഓഡിറ്റ് ചെയ്യേണ്ട URL-കളുടെ ഒരു നിര. ഈ ഉദാഹരണം ഹോംപേജും എബൗട്ട് പേജും ഓഡിറ്റ് ചെയ്യുന്നു. വ്യത്യസ്ത ഉപയോഗ സാഹചര്യങ്ങൾ പരിഗണിച്ച് നിങ്ങളുടെ വെബ്സൈറ്റിലെ എല്ലാ നിർണായക പേജുകളും ഉൾപ്പെടുത്തണം. ഉദാഹരണത്തിന്, ഒരു ഇ-കൊമേഴ്‌സ് സൈറ്റിൽ ഹോംപേജ്, ഉൽപ്പന്ന ലിസ്റ്റിംഗ് പേജുകൾ, ഉൽപ്പന്ന വിശദാംശ പേജുകൾ, ചെക്ക്ഔട്ട് പ്രോസസ്സ് എന്നിവ ഉൾപ്പെട്ടേക്കാം.
• collect.startServerCommand: നിങ്ങളുടെ ഡെവലപ്‌മെന്റ് സെർവർ ആരംഭിക്കുന്നതിനുള്ള കമാൻഡ്. ഒരു ലോക്കൽ ഡെവലപ്‌മെന്റ് എൻവയോൺമെന്റിനെതിരെ ലൈറ്റ്ഹൗസ് സിഐ പ്രവർത്തിപ്പിക്കണമെങ്കിൽ ഇത് ആവശ്യമാണ്.
• collect.numberOfRuns: ഓരോ URL-നും ലൈറ്റ്ഹൗസ് ഓഡിറ്റുകൾ പ്രവർത്തിപ്പിക്കേണ്ട തവണകളുടെ എണ്ണം. ഒന്നിലധികം ഓഡിറ്റുകൾ നടത്തുന്നത് നെറ്റ്‌വർക്ക് സാഹചര്യങ്ങളിലെയും മറ്റ് ഘടകങ്ങളിലെയും വ്യതിയാനങ്ങൾ ലഘൂകരിക്കാൻ സഹായിക്കുന്നു.
• assert.assertions: ലൈറ്റ്ഹൗസ് ഓഡിറ്റ് ഫലങ്ങൾ സാധൂകരിക്കുന്നതിനുള്ള അസർഷനുകളുടെ ഒരു കൂട്ടം. ഓരോ അസർഷനും ഒരു മെട്രിക്കോ വിഭാഗമോ ഒരു പരിധിയോ വ്യക്തമാക്കുന്നു. ആ പരിധി പാലിച്ചില്ലെങ്കിൽ, ബിൽഡ് പരാജയപ്പെടും. ഈ ഉദാഹരണം പ്രകടനം, പ്രവേശനക്ഷമത, മികച്ച രീതികൾ, എസ്.ഇ.ഒ വിഭാഗങ്ങൾ എന്നിവയ്ക്കുള്ള പരിധികൾ സജ്ജമാക്കുന്നു. ഫസ്റ്റ് കണ്ടെന്റ്ഫുൾ പെയിന്റ് (FCP), ലാർജസ്റ്റ് കണ്ടെന്റ്ഫുൾ പെയിന്റ് (LCP), ടോട്ടൽ ബ്ലോക്കിംഗ് ടൈം (TBT), ക്യുമുലേറ്റീവ് ലേഔട്ട് ഷിഫ്റ്റ് (CLS) തുടങ്ങിയ പ്രത്യേക മെട്രിക്കുകൾക്കും ഇത് പരിധികൾ സജ്ജമാക്കുന്നു.
• upload.target: ലൈറ്റ്ഹൗസ് റിപ്പോർട്ടുകൾ എവിടെ അപ്‌ലോഡ് ചെയ്യണമെന്ന് വ്യക്തമാക്കുന്നു. temporary-redirect റിപ്പോർട്ടുകൾ ഒരു താൽക്കാലിക സംഭരണ സ്ഥലത്തേക്ക് അപ്‌ലോഡ് ചെയ്യുകയും അവ ആക്‌സസ് ചെയ്യുന്നതിനുള്ള ഒരു URL നൽകുകയും ചെയ്യുന്നു. ലൈറ്റ്ഹൗസ് സിഐ സെർവർ അല്ലെങ്കിൽ ഗൂഗിൾ ക്ലൗഡ് സ്റ്റോറേജ് അല്ലെങ്കിൽ ആമസോൺ എസ്3 പോലുള്ള ക്ലൗഡ് സ്റ്റോറേജ് സൊല്യൂഷനുകൾ ഉപയോഗിക്കുന്നത് മറ്റ് ഓപ്ഷനുകളിൽ ഉൾപ്പെടുന്നു.

3. നിങ്ങളുടെ സിഐ/സിഡി സിസ്റ്റവുമായി സംയോജിപ്പിക്കുക

അടുത്ത ഘട്ടം ലൈറ്റ്ഹൗസ് സിഐയെ നിങ്ങളുടെ സിഐ/സിഡി പൈപ്പ്ലൈനിലേക്ക് സംയോജിപ്പിക്കുക എന്നതാണ്. ഗിറ്റ്ഹബ് ആക്ഷൻസുമായി ഇത് എങ്ങനെ സംയോജിപ്പിക്കാം എന്നതിന്റെ ഒരു ഉദാഹരണം ഇതാ:

നിങ്ങളുടെ റെപ്പോസിറ്ററിയിൽ ഒരു .github/workflows/lighthouse.yml ഫയൽ ഉണ്ടാക്കുക:

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install Dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |          npm run build
          lhci autorun

            

              
                Copy
              
            
          

ഈ വർക്ക്ഫ്ലോ താഴെ പറയുന്ന ഘട്ടങ്ങൾ നിർവഹിക്കുന്നു:

• കോഡ് ചെക്ക് ഔട്ട് ചെയ്യുന്നു.
• Node.js സജ്ജീകരിക്കുന്നു.
• ഡിപൻഡൻസികൾ ഇൻസ്റ്റാൾ ചെയ്യുന്നു.
• ലൈറ്റ്ഹൗസ് സിഐ പ്രവർത്തിപ്പിക്കുന്നു. ഈ ഘട്ടം ആദ്യം ആപ്ലിക്കേഷൻ നിർമ്മിക്കുന്നു (npm run build), തുടർന്ന് lhci autorun പ്രവർത്തിപ്പിക്കുന്നു, ഇത് ലൈറ്റ്ഹൗസ് ഓഡിറ്റുകൾ എക്സിക്യൂട്ട് ചെയ്യുകയും കോൺഫിഗർ ചെയ്ത പരിധികൾക്ക് വിപരീതമായി ഫലങ്ങൾ ഉറപ്പാക്കുകയും ചെയ്യുന്നു.

നിങ്ങളുടെ പ്രത്യേക സിഐ/സിഡി സിസ്റ്റത്തിനും പ്രോജക്റ്റ് ആവശ്യകതകൾക്കും അനുസരിച്ച് ഈ വർക്ക്ഫ്ലോ ക്രമീകരിക്കുക. ഉദാഹരണത്തിന്, നിങ്ങൾ ഗിറ്റ്ലാബ് സിഐ ആണ് ഉപയോഗിക്കുന്നതെങ്കിൽ, സമാനമായ ഘട്ടങ്ങളുള്ള ഒരു .gitlab-ci.yml ഫയൽ കോൺഫിഗർ ചെയ്യണം.

4. ലൈറ്റ്ഹൗസ് സിഐ പ്രവർത്തിപ്പിക്കുക

നിങ്ങളുടെ മാറ്റങ്ങൾ കമ്മിറ്റ് ചെയ്ത് നിങ്ങളുടെ റെപ്പോസിറ്ററിയിലേക്ക് പുഷ് ചെയ്യുക. സിഐ/സിഡി പൈപ്പ്ലൈൻ യാന്ത്രികമായി ലൈറ്റ്ഹൗസ് സിഐ പ്രവർത്തിപ്പിക്കും. ഏതെങ്കിലും അസർഷനുകൾ പരാജയപ്പെട്ടാൽ, ബിൽഡ് പരാജയപ്പെടും, ഇത് ഡെവലപ്പർമാർക്ക് വിലപ്പെട്ട ഫീഡ്ബാക്ക് നൽകുന്നു. ലൈറ്റ്ഹൗസ് സിഐ റിപ്പോർട്ടുകൾ സിഐ/സിഡി സിസ്റ്റം നൽകുന്ന URL-ൽ ലഭ്യമാകും.

വിപുലമായ കോൺഫിഗറേഷനും കസ്റ്റമൈസേഷനും

ലൈറ്റ്ഹൗസ് സിഐ വിപുലമായ കോൺഫിഗറേഷൻ ഓപ്ഷനുകളും കസ്റ്റമൈസേഷൻ സാധ്യതകളും വാഗ്ദാനം ചെയ്യുന്നു. ചില വിപുലമായ ഫീച്ചറുകൾ ഇതാ:

1. ലൈറ്റ്ഹൗസ് സിഐ സെർവർ ഉപയോഗിക്കുന്നു

കാലക്രമേണ പ്രകടന മെട്രിക്കുകൾ ട്രാക്ക് ചെയ്യുന്നതിനും പ്രോജക്റ്റുകൾ നിയന്ത്രിക്കുന്നതിനും പ്രകടന പ്രശ്നങ്ങളിൽ സഹകരിക്കുന്നതിനും ലൈറ്റ്ഹൗസ് സിഐ സെർവർ ഒരു കേന്ദ്രീകൃത ഡാഷ്ബോർഡ് നൽകുന്നു. ലൈറ്റ്ഹൗസ് സിഐ സെർവർ ഉപയോഗിക്കുന്നതിന്, നിങ്ങൾ ഒരു ഇൻസ്റ്റൻസ് സജ്ജീകരിക്കുകയും റിപ്പോർട്ടുകൾ സെർവറിലേക്ക് അപ്‌ലോഡ് ചെയ്യുന്നതിനായി നിങ്ങളുടെ lighthouserc.js ഫയൽ കോൺഫിഗർ ചെയ്യുകയും വേണം.

ആദ്യം, സെർവർ വിന്യസിക്കുക. ഡോക്കർ, ഹെറോകു, എഡബ്ല്യൂഎസ്, ഗൂഗിൾ ക്ലൗഡ് പോലുള്ള ക്ലൗഡ് പ്രൊവൈഡർമാർ ഉൾപ്പെടെ വിവിധ വിന്യാസ ഓപ്ഷനുകൾ ലഭ്യമാണ്. സെർവർ വിന്യസിക്കുന്നതിനെക്കുറിച്ചുള്ള വിശദമായ നിർദ്ദേശങ്ങൾക്കായി ലൈറ്റ്ഹൗസ് സിഐ ഡോക്യുമെന്റേഷൻ പരിശോധിക്കുക.

സെർവർ പ്രവർത്തിച്ചു തുടങ്ങിയാൽ, സെർവറിലേക്ക് പോയിന്റ് ചെയ്യുന്നതിനായി നിങ്ങളുടെ lighthouserc.js ഫയൽ അപ്‌ഡേറ്റ് ചെയ്യുക:

            module.exports = {
  ci:
{
    collect: {
      url: ['http://localhost:3000'],
      startServerCommand: 'npm start',
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.9 }],
      },
    },
    upload:
{
      target: 'lhci',
      serverBaseUrl: 'YOUR_LHCI_SERVER_URL',
      token: 'YOUR_LHCI_SERVER_TOKEN',
    },
  },
};

            

              
                Copy
              
            
          

YOUR_LHCI_SERVER_URL എന്നതിന് പകരം നിങ്ങളുടെ ലൈറ്റ്ഹൗസ് സിഐ സെർവറിന്റെ URL-ഉം YOUR_LHCI_SERVER_TOKEN എന്നതിന് പകരം സെർവർ ജനറേറ്റ് ചെയ്ത ടോക്കണും നൽകുക. ടോക്കൺ നിങ്ങളുടെ സിഐ പൈപ്പ്ലൈനിനെ സെർവറുമായി ഓതന്റിക്കേറ്റ് ചെയ്യുന്നു.

2. പ്രകടന ബജറ്റുകൾ സജ്ജീകരിക്കുന്നു

പ്രകടന ബജറ്റുകൾ നിർദ്ദിഷ്ട മെട്രിക്കുകൾക്ക് സ്വീകാര്യമായ പരിധികൾ നിർവചിക്കുന്നു. പ്രകടന ബജറ്റുകൾ സജ്ജീകരിക്കാനും ആ ബജറ്റുകൾ കവിഞ്ഞാൽ ബിൽഡുകൾ പരാജയപ്പെടുത്താനും ലൈറ്റ്ഹൗസ് സിഐ നിങ്ങളെ അനുവദിക്കുന്നു. ഇത് പ്രകടനത്തിലെ പിഴവുകൾ തടയാനും നിങ്ങളുടെ വെബ്സൈറ്റ് സ്വീകാര്യമായ പ്രകടന പരിധിക്കുള്ളിൽ തുടരുന്നുവെന്ന് ഉറപ്പാക്കാനും സഹായിക്കുന്നു.

നിങ്ങളുടെ lighthouserc.js ഫയലിൽ assert.assertions പ്രോപ്പർട്ടി ഉപയോഗിച്ച് നിങ്ങൾക്ക് പ്രകടന ബജറ്റുകൾ നിർവചിക്കാം. ഉദാഹരണത്തിന്, ഫസ്റ്റ് കണ്ടെന്റ്ഫുൾ പെയിന്റിന് (FCP) ഒരു പ്രകടന ബജറ്റ് സജ്ജീകരിക്കുന്നതിന്, നിങ്ങൾക്ക് താഴെ പറയുന്ന അസർഷൻ ചേർക്കാം:

            'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
            

              
                Copy
              
            
          

FCP 2500 മില്ലിസെക്കൻഡിൽ കൂടുതലാണെങ്കിൽ ഈ അസർഷൻ ബിൽഡ് പരാജയപ്പെടുത്തും.

3. ലൈറ്റ്ഹൗസ് കോൺഫിഗറേഷൻ കസ്റ്റമൈസ് ചെയ്യുന്നു

നിങ്ങളുടെ പ്രത്യേക ആവശ്യങ്ങൾക്കനുസരിച്ച് ലൈറ്റ്ഹൗസ് കോൺഫിഗറേഷൻ കസ്റ്റമൈസ് ചെയ്യാൻ ലൈറ്റ്ഹൗസ് സിഐ നിങ്ങളെ അനുവദിക്കുന്നു. നിങ്ങൾക്ക് വിവിധ ലൈറ്റ്ഹൗസ് ക്രമീകരണങ്ങൾ കോൺഫിഗർ ചെയ്യാൻ കഴിയും, ഉദാഹരണത്തിന്:

• onlyAudits: പ്രവർത്തിപ്പിക്കേണ്ട ഓഡിറ്റുകളുടെ ഒരു ലിസ്റ്റ് വ്യക്തമാക്കുക.
• skipAudits: ഒഴിവാക്കേണ്ട ഓഡിറ്റുകളുടെ ഒരു ലിസ്റ്റ് വ്യക്തമാക്കുക.
• throttling: വ്യത്യസ്ത നെറ്റ്‌വർക്ക് സാഹചര്യങ്ങൾ അനുകരിക്കുന്നതിന് നെറ്റ്‌വർക്ക് ത്രോട്ട്ലിംഗ് ക്രമീകരണങ്ങൾ കോൺഫിഗർ ചെയ്യുക.
• formFactor: എമുലേറ്റ് ചെയ്യേണ്ട ഫോം ഫാക്ടർ (ഡെസ്ക്ടോപ്പ് അല്ലെങ്കിൽ മൊബൈൽ) വ്യക്തമാക്കുക.
• screenEmulation: സ്ക്രീൻ എമുലേഷൻ ക്രമീകരണങ്ങൾ കോൺഫിഗർ ചെയ്യുക.

ലൈറ്റ്ഹൗസ് കോൺഫിഗറേഷൻ കസ്റ്റമൈസ് ചെയ്യുന്നതിന്, ഒരു കസ്റ്റം ലൈറ്റ്ഹൗസ് കോൺഫിഗറേഷൻ ഫയലിലേക്ക് പോയിന്റ് ചെയ്യുന്ന lhci autorun കമാൻഡിലേക്ക് ഒരു --config-path ഫ്ലാഗ് പാസ് ചെയ്യാവുന്നതാണ്. കോൺഫിഗറേഷൻ ഓപ്ഷനുകളുടെ പൂർണ്ണമായ ലിസ്റ്റിനായി ലൈറ്റ്ഹൗസ് ഡോക്യുമെന്റേഷൻ പരിശോധിക്കുക.

4. ഓതന്റിക്കേറ്റഡ് പേജുകൾ ഓഡിറ്റ് ചെയ്യുന്നു

ഓതന്റിക്കേറ്റഡ് പേജുകൾ ഓഡിറ്റ് ചെയ്യുന്നതിന് അല്പം വ്യത്യസ്തമായ ഒരു സമീപനം ആവശ്യമാണ്. ഓഡിറ്റുകൾ പ്രവർത്തിപ്പിക്കുന്നതിന് മുമ്പ് ഓതന്റിക്കേറ്റ് ചെയ്യാനുള്ള ഒരു മാർഗ്ഗം നിങ്ങൾ ലൈറ്റ്ഹൗസ് സിഐക്ക് നൽകേണ്ടതുണ്ട്. കുക്കികൾ ഉപയോഗിച്ചോ ലോഗിൻ പ്രോസസ്സ് സ്ക്രിപ്റ്റ് ചെയ്തോ ഇത് നേടാനാകും.

ലൈറ്റ്ഹൗസ് സിഐയിലേക്ക് ഓതന്റിക്കേഷൻ കുക്കികൾ പാസ് ചെയ്യാൻ --extra-headers ഫ്ലാഗ് ഉപയോഗിക്കുന്നത് ഒരു സാധാരണ സമീപനമാണ്. വെബ്സൈറ്റിൽ ലോഗിൻ ചെയ്ത ശേഷം നിങ്ങളുടെ ബ്രൗസറിന്റെ ഡെവലപ്പർ ടൂളുകളിൽ നിന്ന് കുക്കികൾ ലഭിക്കും.

പകരമായി, ലോഗിൻ പ്രോസസ്സ് ഓട്ടോമേറ്റ് ചെയ്യാനും തുടർന്ന് ഓതന്റിക്കേറ്റഡ് പേജുകളിൽ ലൈറ്റ്ഹൗസ് ഓഡിറ്റുകൾ പ്രവർത്തിപ്പിക്കാനും നിങ്ങൾക്ക് ഒരു പപ്പീറ്റർ സ്ക്രിപ്റ്റ് ഉപയോഗിക്കാം. ഈ സമീപനം കൂടുതൽ വഴക്കം നൽകുകയും സങ്കീർണ്ണമായ ഓതന്റിക്കേഷൻ സാഹചര്യങ്ങൾ കൈകാര്യം ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുകയും ചെയ്യുന്നു.ലൈറ്റ്ഹൗസ് സിഐ ഉപയോഗിച്ചുള്ള ഫ്രണ്ട്എൻഡ് പെർഫോമൻസ് ടെസ്റ്റിംഗിനുള്ള മികച്ച രീതികൾ

ലൈറ്റ്ഹൗസ് സിഐയുടെ പ്രയോജനങ്ങൾ പരമാവധിയാക്കാൻ, ഈ മികച്ച രീതികൾ പിന്തുടരുക:

• ലൈറ്റ്ഹൗസ് സിഐ സ്ഥിരമായി പ്രവർത്തിപ്പിക്കുക: ഓരോ കമ്മിറ്റിനും പുൾ അഭ്യർത്ഥനയ്ക്കും ഒപ്പം ഓഡിറ്റുകൾ യാന്ത്രികമായി പ്രവർത്തിപ്പിക്കുന്നതിന് നിങ്ങളുടെ സിഐ/സിഡി പൈപ്പ്ലൈനിൽ ലൈറ്റ്ഹൗസ് സിഐ സംയോജിപ്പിക്കുക. ഇത് പ്രകടനത്തിലെ പിഴവുകൾ നേരത്തെ കണ്ടെത്താനും ഉടനടി പരിഹരിക്കാനും ഉറപ്പാക്കുന്നു.
• യാഥാർത്ഥ്യബോധമുള്ള പ്രകടന ബജറ്റുകൾ സജ്ജീകരിക്കുക: വെല്ലുവിളി നിറഞ്ഞതും എന്നാൽ കൈവരിക്കാവുന്നതുമായ പ്രകടന ബജറ്റുകൾ നിർവചിക്കുക. യാഥാസ്ഥിതിക ബജറ്റുകളിൽ ആരംഭിച്ച് നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രകടനം മെച്ചപ്പെടുമ്പോൾ ക്രമേണ അവ കർശനമാക്കുക. പേജുകളുടെ സങ്കീർണ്ണതയും പ്രാധാന്യവും അനുസരിച്ച് വ്യത്യസ്ത തരം പേജുകൾക്ക് വ്യത്യസ്ത ബജറ്റുകൾ സജ്ജീകരിക്കുന്നത് പരിഗണിക്കുക.
• പ്രധാന മെട്രിക്കുകളിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുക: ഉപയോക്തൃ അനുഭവത്തിലും ബിസിനസ്സ് ഫലങ്ങളിലും ഏറ്റവും കൂടുതൽ സ്വാധീനം ചെലുത്തുന്ന പ്രധാന പ്രകടന മെട്രിക്കുകൾക്ക് മുൻഗണന നൽകുക. ഗൂഗിളിന്റെ കോർ വെബ് വൈറ്റൽസ് (LCP, FID, CLS) ഒരു നല്ല തുടക്കമാണ്.
• പ്രകടന പ്രശ്നങ്ങൾ അന്വേഷിക്കുകയും പരിഹരിക്കുകയും ചെയ്യുക: ലൈറ്റ്ഹൗസ് സിഐ പ്രകടന പ്രശ്നങ്ങൾ തിരിച്ചറിയുമ്പോൾ, അവയെ സമഗ്രമായി അന്വേഷിക്കുകയും ഉചിതമായ പരിഹാരങ്ങൾ നടപ്പിലാക്കുകയും ചെയ്യുക. പ്രശ്നങ്ങളുടെ മൂലകാരണങ്ങൾ തിരിച്ചറിയുന്നതിനും ഏറ്റവും സ്വാധീനം ചെലുത്തുന്ന പരിഹാരങ്ങൾക്ക് മുൻഗണന നൽകുന്നതിനും ലൈറ്റ്ഹൗസ് റിപ്പോർട്ടുകൾ ഉപയോഗിക്കുക.
• കാലക്രമേണ പ്രകടനം നിരീക്ഷിക്കുക: പ്രവണതകളും പാറ്റേണുകളും തിരിച്ചറിയുന്നതിന് കാലക്രമേണ പ്രകടന മെട്രിക്കുകൾ ട്രാക്ക് ചെയ്യുക. പ്രകടന ഡാറ്റ ദൃശ്യവൽക്കരിക്കുന്നതിനും മെച്ചപ്പെടുത്താനുള്ള മേഖലകൾ തിരിച്ചറിയുന്നതിനും ലൈറ്റ്ഹൗസ് സിഐ സെർവറോ മറ്റ് നിരീക്ഷണ ഉപകരണങ്ങളോ ഉപയോഗിക്കുക.
• നിങ്ങളുടെ ടീമിനെ ബോധവൽക്കരിക്കുക: ഫ്രണ്ട്എൻഡ് പ്രകടനത്തിന്റെ പ്രാധാന്യവും ലൈറ്റ്ഹൗസ് സിഐ എങ്ങനെ ഫലപ്രദമായി ഉപയോഗിക്കാമെന്നും നിങ്ങളുടെ ടീം മനസ്സിലാക്കുന്നുവെന്ന് ഉറപ്പാക്കുക. അവരുടെ കഴിവുകളും അറിവും മെച്ചപ്പെടുത്താൻ സഹായിക്കുന്നതിന് പരിശീലനവും വിഭവങ്ങളും നൽകുക.
• ആഗോള നെറ്റ്‌വർക്ക് സാഹചര്യങ്ങൾ പരിഗണിക്കുക: പ്രകടന ബജറ്റുകൾ സജ്ജീകരിക്കുമ്പോൾ, ലോകത്തിന്റെ വിവിധ ഭാഗങ്ങളിലെ നെറ്റ്‌വർക്ക് സാഹചര്യങ്ങൾ പരിഗണിക്കുക. വേഗത കുറഞ്ഞ ഇന്റർനെറ്റ് ഉള്ള പ്രദേശങ്ങളിലെ ഉപയോക്താക്കൾക്ക് വേഗതയേറിയ പ്രദേശങ്ങളിലെ ഉപയോക്താക്കളേക്കാൾ വ്യത്യസ്തമായ അനുഭവമായിരിക്കാം. പരിശോധന സമയത്ത് വ്യത്യസ്ത നെറ്റ്‌വർക്ക് സാഹചര്യങ്ങൾ അനുകരിക്കാൻ ടൂളുകൾ ഉപയോഗിക്കുക.
• ചിത്രങ്ങൾ ഒപ്റ്റിമൈസ് ചെയ്യുക: ഫ്രണ്ട്എൻഡ് പ്രകടനത്തിന്റെ ഒരു നിർണായക വശമാണ് ഇമേജ് ഒപ്റ്റിമൈസേഷൻ. ഗുണമേന്മ നഷ്ടപ്പെടാതെ ചിത്രങ്ങൾ കംപ്രസ് ചെയ്യാനും ഒപ്റ്റിമൈസ് ചെയ്യാനും ImageOptim, TinyPNG പോലുള്ള ടൂളുകൾ ഉപയോഗിക്കുക. JPEG, PNG പോലുള്ള പരമ്പരാഗത ഫോർമാറ്റുകളേക്കാൾ മികച്ച കംപ്രഷനും ഗുണനിലവാരവും നൽകുന്ന WebP പോലുള്ള ആധുനിക ഇമേജ് ഫോർമാറ്റുകൾ ഉപയോഗിക്കുക. വ്യൂപോർട്ടിൽ ഉടൻ ദൃശ്യമാകാത്ത ചിത്രങ്ങൾക്കായി ലേസി ലോഡിംഗ് നടപ്പിലാക്കുക.
• കോഡ് മിനിഫൈ ചെയ്യുകയും കംപ്രസ് ചെയ്യുകയും ചെയ്യുക: ഫയൽ വലുപ്പം കുറയ്ക്കുന്നതിന് നിങ്ങളുടെ HTML, CSS, JavaScript കോഡ് മിനിഫൈ ചെയ്യുക. UglifyJS, Terser പോലുള്ള ടൂളുകൾ ഉപയോഗിക്കുക. കൈമാറ്റം ചെയ്യപ്പെടുന്ന ഫയലുകളുടെ വലുപ്പം കൂടുതൽ കുറയ്ക്കുന്നതിന് നിങ്ങളുടെ സെർവറിൽ Gzip അല്ലെങ്കിൽ Brotli കംപ്രഷൻ പ്രവർത്തനക്ഷമമാക്കുക.
• ബ്രൗസർ കാഷിംഗ് പ്രയോജനപ്പെടുത്തുക: ചിത്രങ്ങൾ, CSS, JavaScript ഫയലുകൾ പോലുള്ള സ്റ്റാറ്റിക് അസറ്റുകൾക്കായി ഉചിതമായ കാഷെ ഹെഡറുകൾ സജ്ജീകരിക്കാൻ നിങ്ങളുടെ സെർവർ കോൺഫിഗർ ചെയ്യുക. ഇത് ബ്രൗസറുകളെ ഈ അസറ്റുകൾ കാഷെ ചെയ്യാനും അവ ആവർത്തിച്ച് ഡൗൺലോഡ് ചെയ്യുന്നത് ഒഴിവാക്കാനും അനുവദിക്കുന്നു.

ഉപസംഹാരം

നിങ്ങളുടെ ഡെവലപ്‌മെന്റ് വർക്ക്ഫ്ലോയിലേക്ക് ലൈറ്റ്ഹൗസ് സിഐ സംയോജിപ്പിക്കുന്നത് ഉയർന്ന പ്രകടനമുള്ളതും, പ്രവേശനക്ഷമതയുള്ളതും, എസ്.ഇ.ഒ-സൗഹൃദവുമായ വെബ്സൈറ്റുകൾ നിർമ്മിക്കുന്നതിനുള്ള ഒരു നിർണായക ഘട്ടമാണ്. ഫ്രണ്ട്എൻഡ് പ്രകടന പരിശോധന ഓട്ടോമേറ്റ് ചെയ്യുന്നതിലൂടെയും കാലക്രമേണ പ്രകടനം ട്രാക്ക് ചെയ്യുന്നതിലൂടെയും, നിങ്ങൾക്ക് പ്രകടന പ്രശ്നങ്ങൾ നേരത്തെ തിരിച്ചറിയാനും പരിഹരിക്കാനും ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്താനും ബിസിനസ്സ് ഫലങ്ങൾ നേടാനും കഴിയും. ലൈറ്റ്ഹൗസ് സിഐ സ്വീകരിക്കുകയും നിങ്ങളുടെ ഡെവലപ്‌മെന്റ് പ്രക്രിയയിൽ തുടർച്ചയായ പ്രകടന മെച്ചപ്പെടുത്തൽ ഒരു പ്രധാന മൂല്യമാക്കുകയും ചെയ്യുക. വെബ്സൈറ്റ് പ്രകടനം ഒരു തവണത്തെ ശ്രമമല്ല, മറിച്ച് നിരന്തരമായ ശ്രദ്ധയും ഒപ്റ്റിമൈസേഷനും ആവശ്യമുള്ള ഒരു തുടർപ്രക്രിയയാണെന്ന് ഓർക്കുക. നിങ്ങളുടെ എല്ലാ ഉപയോക്താക്കൾക്കും അവരുടെ ലൊക്കേഷനോ ഉപകരണമോ പരിഗണിക്കാതെ തടസ്സമില്ലാത്ത അനുഭവം ഉറപ്പാക്കുന്നതിന് സാംസ്കാരികവും പ്രാദേശികവുമായ ഘടകങ്ങൾ പരിഗണിക്കുക. ഈ ലേഖനത്തിൽ പറഞ്ഞിരിക്കുന്ന മികച്ച രീതികൾ പിന്തുടരുന്നതിലൂടെ, നിങ്ങളുടെ വെബ്സൈറ്റ് ലോകമെമ്പാടുമുള്ള ഉപയോക്താക്കൾക്ക് വേഗതയേറിയതും വിശ്വസനീയവും ആസ്വാദ്യകരവുമായ അനുഭവം നൽകുന്നുവെന്ന് ഉറപ്പാക്കാൻ നിങ്ങൾക്ക് കഴിയും.